<!-- 试试index.vue如何识别 -->
<template>
  <div class='returnsManagement'>
    <!-- 顶部筛选条件 -->
    <div>
      <a-radio-group v-model="ListType"
                     size="large" @change="change">
        <a-radio-button value="">
          全部申请（{{listLength.allCount}}）
        </a-radio-button>
        <a-radio-button value="TO_AUDIT">
          待处理（{{listLength.toAudit}}）
        </a-radio-button>
        <a-radio-button value="WAITING_GOODS">
          退货中{{listLength.repairsCount}}）
        </a-radio-button>
        <a-radio-button value="REFUND_FINISH">
          已完成（{{listLength.refundFinishCount}}）
        </a-radio-button>
        <a-radio-button value="REVIEW_FAILED">
          已拒绝（{{listLength.reviewFatledCount}}）
        </a-radio-button>
      </a-radio-group>
    </div>
    <!-- 列表 -->

    <search-form-table :url="url"
                       ref="searchtable"
                       :hideSelect="true"
                       :columns="columns"
                       :form="form"
                       style="margin-top:20px;"
                       :ListType='ListType'>

      <template slot="searchForm">
        <a-form layout="inline"
                :form="form">
          <a-form-item label="退货单号">
            <a-input v-decorator="['id']"
                     placeholder="请输入退货单号"> </a-input>
          </a-form-item>

          <a-form-item label="收货人">
            <a-input v-decorator="['userName']"
                     placeholder="收货人手机号/姓名"> </a-input>
          </a-form-item>

          <a-form-item label="申请时间">
            <fast-range-picker
              v-decorator="[
                'createStartDate-createEndDate',
              ]"
            >
            </fast-range-picker>
          </a-form-item>
        </a-form>
      </template>


      <template slot="tableOperation" slot-scope="{ record }">
        <permission authority="">
          <span class="text-primary pointer"
                @click="openInfo(record)">查看详情</span>
        </permission>
      </template>

    </search-form-table>
  </div>
</template>

<script>
  import SearchFormTable from "./SearchTable/index";

  export default {
    name: '',
    components: {
      SearchFormTable
    },
    directives: {},
    filters: {},
    mixins: [],
    model: {},
    props: {},
    data() {
      return {
        ListType:'',
        // 各类数据长度
        listLength:{},
        url: '/order/goodsrepairs/page',
        // url:'',
        currentRecord: {},
        form: this.$form.createForm(this, { name: 'table_search' }),
        columns: [
          {
            title: '退货单号',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
          },
          {
            title: '申请时间',
            dataIndex: 'createDate',
            key: 'createDate'
          },
          {
            title: '用户账号',
            dataIndex: 'userPhone',
            key: 'userPhone'
          },
          {
            title: '退款金额',
            dataIndex: 'refundPrice',
            key: 'refundPrice',
            align: 'center',
            customRender: (text, row) =>{
              return (text/100).toFixed(2)+'元'
            }

          },
          {
            title: '联系人',
            dataIndex: 'userName',
            key: 'userName'
          },
          {
            title: '申请状态',
            dataIndex: 'returnGoodsStatus',
            key: 'returnGoodsStatus',
            customRender: (text, row) => {
              switch (text) {
                case 'TO_AUDIT':
                  return '待处理'
                case 'USER_CANCEL':
                  return '撤销申请'
                case 'WAITING_DELIVERY':
                  return '买家待发货'
                case 'WAITING_GOODS':
                  return '退货中'
                case 'REFUND_FINISH':
                  return '已完成'
                case 'REVIEW_FAILED':
                  return '已拒绝'
                case 'REFUND_OF':
                  return '退款中'
              }
            },
          },
          {
            title: '处理时间',
            dataIndex: 'updateDate',
            key: 'updateDate',
          },
          {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      }
    },
    computed: {},
    watch: {},
    beforeCreate() {},

    created() {
      this.getItemsLength()
    },

    // 方法集合
    methods: {

      change(){
        this.$refs.searchtable.handleSearch()
      },

      openInfo(record) {
        console.log('当前行数据:',record)
        this.currentRecord = record
        this.$router.push({
          name: 'OrderReturnsManagementInfo',
          query: {
            id: record.id,
            applyStatus:record.returnGoodsStatus
          }
        })
      },

      // 获取各类数据个数
      async getItemsLength(){
        const res = await this.$get('/order/goodsrepairs/total?repairsType=2')
        this.listLength = res.dataInfo
      }
    }
  }
</script>
<style rel='stylesheet/less' lang='less' scoped>
  //@import url();
</style>
<!--
    getFieldsValue
    getFieldValue
    resetFields

      ac(){
      console.log(this.form.getFieldsValue())
      console.log(this.form.getFieldValue('phoneNumber'))
    },
-->